<template>
  <div class="standard-deploy">
    <div class="opt-buttons">
      <!-- v-btnPermission:add -->
      <el-button
        v-btnPermission:add
        type="primary"
        icon="el-icon-plus"
        @click="doAdd">
        {{ $t('add') }}</el-button>
      <!-- v-btnPermission:edit -->
      <el-button
        v-btnPermission:edit
        :disabled="UpdateDisabled"
        type="primary"
        icon="el-icon-edit"
        @click="handleEdit">
        {{ $t('modify') }}</el-button>
      <!-- v-btnPermission:delete -->
      <el-button
        v-btnPermission:delete
        :disabled="DeleteDisabled"
        type="danger"
        icon="el-icon-delete"
        @click="handleDelete"
      >{{ $t('delete') }}</el-button>
    </div>
    <el-card shadow="never">
      <el-row>
        <dynTable
          ref="dynTable"
          :loading="tableLoading"
          :table-data="tableData"
          :table-columns="tableColumns"
          :handle-selection-change="handleSelectionChange"
          :row-click="rowClick"
        />
      </el-row>
    </el-card >
    <pagination
      :page.sync="listQuery.page"
      :size.sync="listQuery.size"
      :total="total"
      @pagination="onChangePage"
    />
    <standardValueDialog ref="editDialog" @initList="initList"/>
  </div>
</template>
<script>
import mySetting from '@/mixins/mySetting'
import standardValueDialog from './components/editDialog'
import { getList, doDelete } from '@/api/OEE/standardDeploy'
export default {
  name: 'EqpStatusManage',
  components: { standardValueDialog },
  mixins: [mySetting],
  data() {
    const searchTags = [
      { label: this.$t('timeType'), prop: 'timeType', tag: 'DynInput' }
    ]
    const tableColumns = [
      { prop: '', label: '', type: 'selection' },
      { prop: 'standardColor', label: this.$t('IndicatorColor'), templete: (_scope) => {
        return (
          <span style={{ display: 'inline-block', 'background': _scope.row.standardColor, 'color': '#fff',
            'borderRadius': '4px', 'line-height': '30px', 'padding': '0 10px'
          }}>
            {_scope.row.standardColor}
          </span>
        )
      } },
      { prop: 'minIndex', label: this.$t('startOfInterval') },
      { prop: 'maxIndex', label: this.$t('endOfInterval') }
    ]
    return {
      infoForm: {},
      searchTags: Object.freeze(searchTags),
      tableColumns: Object.freeze(tableColumns),
      tableLoading: true
    }
  },
  created() {
    this.initList()
  },
  methods: {
    async initList() {
      const res = await getList(this.$clearNull({ ...this.listQuery, ...this.infoForm }))
      this.tableData = res.data
      this.total = res.total
      this.tableLoading = false
    },
    doSearch() {
      this.listQuery.page = 1
      this.initList()
    },
    onChangePage(page) {
      this.listQuery = page
      this.initList()
    },
    handleDelete() {
      this.$confirm(
        `${this.$t('confirmDelete')}${this.multipleSelection.length}${this.$t(
          'recordCount'
        )}?`,
        this.$t('tip'),
        {
          confirmButtonText: this.$t('confirm'),
          cancelButtonText: this.$t('cancel'),
          type: 'warning'
        }
      ).then(() => {
        const ids = this.multipleSelection.map(ele => ele.id)
        doDelete({ ids }).then(res => {
          this.$betterTips(res, this.setOnePage, this.initList)
        })
      })
    },
    doAdd() {
      this.$refs.editDialog.handleOpen()
    },
    handleEdit() {
      this.$refs.editDialog.handleOpen(this.multipleSelection[0])
    },
    getList(page) {
      this.listQuery = page
      this.initList()
    },
    handleSelectionChange(row) {
      this.multipleSelection = row
    },
    rowClick(row) {
      this.$refs.dynTable.$refs.multipleTable.toggleRowSelection(row)
    }
  }
}
</script>
<style lang="scss" scoped>
@import "~@/assets/styles/defaultStyle.scss";
.opt-buttons{
  padding: 22px;
  background-color: #fff;
}
</style>
